<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:form id="formUbigeo">
        <p:panelGrid id="pnlUbigeo">
            <p:row>
                <p:column>
                    <h:outputLabel value="PAIS(*)"/>
                </p:column>
                <p:column>
                    <p:selectOneMenu value="#{BKUbigeo.paisSeleccionado}" converter="#{paisConverter}" required="true"  
                                     effect="fade" var="pais" filter="true" filterMatchMode="contains" id="idPais">  
                        <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                        <f:selectItems value="#{BKUbigeo.listaPaises}" var="pa" itemLabel="#{pa.nombre}" itemValue="#{pa}"/>  

                        <p:column>  
                            #{pais.nombre}
                        </p:column>  
                        <p:ajax listener="#{MBUbigeo.operarSobrePaisSeleccionado}" update="idCiudad,datosPeru"/>
                    </p:selectOneMenu>  
                    <p:message for="idPais" display="text" />
                </p:column>
            </p:row>
            
            <p:row>
                <p:column colspan="2">
                    <p:outputPanel id="datosPeru" layout="block" >
                        <h:panelGrid columns="3" style="margin: 10px 0;" 
                                     rendered="#{BKUbigeo.estaPeruSeleccionado eq true?'true':'false'}">

                            <h:outputLabel value="CIUDAD(*)"/>
                            <p:selectOneMenu value="#{BKUbigeo.ciudadSeleccionada}" required="true"  
                                             effect="fade" var="ciudad" filter="true" filterMatchMode="contains" id="idCiudad"
                                             disabled="#{BKUbigeo.paisSeleccionado eq null?'true':'false'}" >  
                                <f:selectItem itemLabel="Seleccionar" itemValue="0" />  
                                <f:selectItems value="#{BKUbigeo.listaCiudades}" var="ci" itemLabel="#{ci.nombre}" itemValue="#{ci.codigo}"/>  

                                <p:column>  
                                    #{ciudad.nombre}
                                </p:column>  
                                <p:ajax listener="#{MBUbigeo.operarSobreCiudadSeleccionada}" 
                                        update="#{BKUbigeo.estaPeruSeleccionado eq true?'idProvincia,idDistrito':''}"/>
                            </p:selectOneMenu> 
                            <p:message for="idCiudad" display="text" />

                            <h:outputText value="PROVINCIA(*)" /> 
                            <p:selectOneMenu id="idProvincia" value="#{BKUbigeo.provinciaSeleccionada}" 
                                             effect="fade" var="provincia" filter="true" filterMatchMode="contains" required="true"  
                                             disabled="#{BKUbigeo.ciudadSeleccionada eq null?'true':'false'}" >    
                                <f:selectItem itemLabel="Seleccionar" itemValue="0" />
                                <f:selectItems value="#{BKUbigeo.listaProvincias}" var="pr" itemLabel="#{pr.nombre}" itemValue="#{pr.codigo}"/> 
                                <p:ajax event="change" listener="#{MBUbigeo.operarSobreProvinciaSeleccionada}" update="idDistrito"/>
                                <p:column>  
                                    #{provincia.nombre}
                                </p:column>  
                            </p:selectOneMenu>  
                            <p:message for="idProvincia" display="text"/> 

                            <h:outputText value="DISTRITO(*)" /> 
                            <p:selectOneMenu id="idDistrito" value="#{BKUbigeo.distritoSeleccionado}" 
                                             effect="fade" var="distrito" filter="true" filterMatchMode="contains" required="true"
                                             disabled="#{BKUbigeo.provinciaSeleccionada eq null?'true':'false'}" >   
                                <f:selectItem itemLabel="Seleccione" itemValue="0"/> 
                                <f:selectItems value="#{BKUbigeo.listaDistrito}" var="di" itemLabel="#{di.nombre}" itemValue="#{di.codigo}"/> 
                                <p:column>  
                                    #{distrito.nombre}
                                </p:column>  
                            </p:selectOneMenu>  
                            <p:message for="idDistrito" display="text"/>

                        </h:panelGrid>
                    </p:outputPanel>
                </p:column>
            </p:row>
            <p:row>
                <p:column colspan="6" style="text-align: center">
                    <p:commandButton style="text-align: center;" value="APLICAR"
                                     actionListener="#{MBUbigeo.aplicarUbigeo}"
                                     oncomplete="if (args.validationFailed){ #{BKUbigeo.dialog}.show()} else {#{BKUbigeo.dialog}.hide()}"
                                     update="pnlUbigeo , #{BKUbigeo.update}"/>
                    <p:commandButton type="button" value="CANCELAR" 
                                     style="text-align: center;" onclick="#{BKUbigeo.dialog}.hide()"/>
                </p:column>
            </p:row>



        </p:panelGrid>
    </h:form>
</html>